<template>
  <div class="combinationDetail">
    <c-title :hide="false" text="组合券"></c-title>
    <div class="topBox">
      <div class="topBox_t">
        <div class="topBox_t_l">最终获取的优惠券</div>
        <div class="topBox_t_r" @click="toBackRelpace">选择其他组合</div>
      </div>
      <detail_Combination :isFirst="true" :infoData="info.combination_coupon"></detail_Combination>
    </div>
    <div class="other" v-for="(child, ind) in info.combination_detail" :key="ind">
      <div class="title">需要{{child.coupon_name}}：{{ child.num }}张</div>
      <van-checkbox-group v-model="child.member_coupon_ids" :max="child.num">
        <div v-for="(item, index) in checkArray(child)" :key="index" style="margin-bottom:0.63rem;" class="child_c">
          <div class="coupon_l_check">
            <van-checkbox :name="item.id" checked-color="#F15353" :disabled="disabledM(ind, id, index)"></van-checkbox>
          </div>
          <detail_Combination :infoData="item" v-if="item && item.coupon"></detail_Combination>
        </div>
      </van-checkbox-group>
      <div class="moreTxt" v-if="!child.hidden" @click="tapShowAll(ind)">展开<van-icon name="arrow-down" /></div>
    </div>
    <div class="posButton set-pc-style" v-if="info && info.combination_detail">
      <div class="pos" :class="btnPosCheck ? 'posRd' : ''" @click="tapCombination">组合</div>
    </div>
  </div>
</template>
<script>
import detail_Combination from "./components/detail_Combination.vue";
export default {
  data() {
    return {
      info: [],
      member_coupon_ids: [],
      arrayKey: 0
    };
  },
  activated() {
    this.getData();
  },
  computed: {
    btnPosCheck() {
      if (!this.info) return;
      let check = true;
      let combination_detail = this.info?.combination_detail;
      for (let i = 0; i < combination_detail.length; i++) {
        if (combination_detail[i].num > combination_detail[i].member_coupon_ids.length) {
          check = false;
        }
      }
      return check;
    },
    disabledM(ind, id, index) {
      return function(ind, id, index) {
        let child = this.info.combination_detail[ind];
        if (!child.member_coupon_ids) return false;
        if (child.member_coupon_ids.length == 0 || child.num > child.member_coupon_ids.length) {
          return false;
        }
        if (child.num >= child.member_coupon_ids.length && child.member_coupon_ids.indexOf(child.member_coupon[index].id) > -1) {
          return false;
        } else {
          return true;
        }
      };
    },
    checkArray(child) {
      return function(child) {
        if (!child.hidden) {
          return child.member_coupon.slice(0, 2);
        }
        return child.member_coupon;
      };
    }
  },
  methods: {
    toBackRelpace() {
      this.$router.go(-1);
    },
    async tapCombination() {
      if (!this.btnPosCheck) return this.$toast("请选择组合所需优惠券");
      let combination_detail = this.info.combination_detail;
      let arr = [];
      for (let i = 0; i < combination_detail.length; i++) {
        arr.push(...combination_detail[i].member_coupon_ids);
      }
      this.member_coupon_ids = arr;
      let json = { id: this.$route.params.id, member_coupon_ids: this.member_coupon_ids };
      let { data, msg, result } = await $http.post("plugin.new-coupon.frontend.controllers.combination.combination", json, "");
      if (result) {
        this.$toast(msg);
        setTimeout(() => {
          this.$router.replace(this.fun.getUrl("new_coupon_detail_combination", {id: this.info.combination_coupon.coupon_id}, {}));
        }, 700);
      } else {
        this.$toast(msg);
      }
    },
    tapShowAll(ind) {
      this.$set(this.info.combination_detail[ind], "hidden", true);
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.new-coupon.frontend.controllers.combination.detail", { id: this.$route.params.id }, "");
      if (result) {
        this.info = data.info;
        // 设置默认选中的券
        this.defaultSelection();
      } else {
        this.$toast(msg);
      }
    },
    defaultSelection() {
      let array = this.info.combination_detail;
      for (let i = 0; i < array.length; i++) {
        this.$set(array[i], "member_coupon_ids", []);
        for (let k = 0; k < array[i].member_coupon.length; k++) {
          if (k < array[i].num) {
            array[i].member_coupon_ids.push(array[i].member_coupon[k].id);
          }
        }
      }
      this.$set(this.info, "combination_detail", array);
    }
  },
  components: { detail_Combination }
};
</script>
<style lang="scss" scoped>
.posButton {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  background: #fff;
  padding: 0.63rem 0.75rem;
  z-index: 2;
  box-sizing: border-box;
  .pos {
    border-radius: 1.28rem 1.28rem 1.28rem 1.28rem;
    font-weight: 500;
    font-size: 0.94rem;
    color: #ffffff;
    text-align: center;
    padding: 0.75rem 0;
    background: #d6d6dc;
    box-sizing: border-box;
  }
  .posRd {
    background: #f15353;
  }
}
.combinationDetail {
  padding-bottom: 5rem;
  box-sizing: border-box;
}
.other {
  margin: 1.31rem 0.75rem 0 0.75rem;
  .title {
    font-weight: bold;
    font-size: 0.88rem;
    text-align: left;
    margin-bottom: 1.06rem;
  }
  .child_c {
    position: relative;
    .coupon_l_check {
      position: absolute;
      left: 0.63rem;
      top: 0.63rem;
      z-index: 1;
    }
  }
  .moreTxt {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #6e6e79;
    margin-top: 0.34rem;
    .van-icon {
      margin-left: 0.25rem;
    }
  }
}
.topBox {
  background: #fff;
  padding: 0.62rem 0.75rem 0.94rem 0.75rem;
  .topBox_t {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.62rem;
    .topBox_t_l {
      font-weight: bold;
      font-size: 0.88rem;
      color: #00001c;
    }
    .topBox_t_r {
      font-weight: 400;
      font-size: 0.75rem;
      color: #f15353;
      padding: 0.62rem 0.88rem;
      box-sizing: border-box;
      border-radius: 1.13rem;
      border: 0.03rem solid #f15353;
    }
  }
}
</style>
